<template>
	<view>
		<tt-bar title="考勤管理" leftIcon="icon-back"></tt-bar>
		<view class="searchBar">
			<view class="searchGroup">
				<text class="iconfont icon-search"></text>
				<input type="text" v-model="keywords"/>
				<text class="iconfont icon-guanbi2fill" v-if="keywords.length>0" @tap="clearSearch"></text>
			</view>
			<text class="searchText" @tap="search">搜索</text>
		</view>
		<scroll-view v-if="classList.length>0" scroll-y="true" :style="{'height':scHeight+'px'}">
			<view class="cwList">
				<block v-for="(item,index) in classList" :key="index">
					<view class="cwRow" @tap="toHistory(index)">
						<view class="classInfo">
							<text class="className">班级：{{item.name}}</text>
							<text class="goodName">课程：{{item.course_name}}</text>
							<text class="goodName">教室：{{item.schoolRoom}}</text>
						</view>
						<text class="iconfont icon-right"></text>
					</view>
				</block>
				
			</view>
		</scroll-view>
		<emptyBox v-if="classList.length<1" type="class"></emptyBox>
	</view>
</template>

<script>
	import ttBar from "@/components/ttBar/ttBar.vue";
	import emptyBox from "../../components/emptyBox/emptyBox.vue";
	import API from "@/common/api.js";
	import {mapState} from "vuex";
	export default {
		components: {
			ttBar,
			emptyBox
		},
		computed:{
			...mapState({
				userInfo:state=>state.user.userInfo,
				selectShop:state=>state.shop.selectShop,
			})
			
		},
		data() {
			return {
				scHeight: uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().statusBarHeight - uni.upx2px(180),
				keywords:'',	//搜索关键字
				classList:[],
				allList:[]
			};
		},
		methods:{
			toHistory(e){
				let _index=parseInt(e);
				let _data={
					classId:this.classList[_index].id,
					className:this.classList[_index].name,
					goodName:this.classList[_index].course_name,
					classRoom:this.classList[_index].schoolRoom,
					teacherName:this.classList[_index].tcName
				}
				uni.setStorageSync("classInfo",_data)
				this.toPage({
					url:'checkWorkHistory'
				})
			},
			getData(){
				let _data={};
				_data.storeId=this.selectShop.id;
				_data.user_id=this.userInfo.userId.toString();
				API.getClassList(_data).then(res=>{
					
					let _arr=[];
					res.data.data.forEach((x,i)=>{
						let _tcName=[];
						x.teacherList.forEach((m,n)=>{
							_tcName[n]=m.name
						})
						
						_arr[i]=x;
						_arr[i].tcName=_tcName.join(',');
					})
					this.allList=_arr
					this.classList=_arr
					
				})
			},
			search(){
				if(!this.keywords.tailCut()){
					uni.showToast({
						title: '请输入要搜索的班级',
						icon: 'none'
					});
				}else{
					let arr=[];
					let _this=this;
					this.allList.forEach(function(i,v){
						if(i.name.indexOf(_this.keywords)>-1){
							arr.push(i)
						}
					})
					_this.classList=arr;
				}
			},
			clearSearch(){
				this.keywords='';
				this.classList=this.allList
			}
		},
		watch:{
			keywords(newVal){
				if(newVal.length==0){
					this.classList=this.allList
				}
			}
		},
		onLoad() {
			this.getData()
			uni.$on("upList",()=>{
				this.getData()
			})
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.getData()
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f6f6f6;

	}

	.searchBar {
		display: flex;
		height: 90upx;
		padding: 0 32upx;
		background-color: #FFFFFF;
		align-items: center;

		.searchGroup {
			display: flex;
			align-items: center;
			padding: 0 10upx;
			background-color: #f6f6f6;
			height: 56upx;
			border-radius: 28upx;
			flex-grow: 1;

			.iconfont {
				font-size: 32upx;
				color: #c3c3c3;
				margin-right: 16upx;
			}

			input {
				height: 100%;
				line-height: 56upx;
				font-size: 28upx;
				flex: 1;
			}
		}

		.searchText {
			font-size: 34rpx;
			color: #202932;
			margin-left: 28upx;
			flex-shrink: 0;
		}
	}

	.cwList {
		padding: 30upx 38upx;
		display: flex;
		flex-direction: column;

		.cwRow {
			padding: 35upx 30upx;
			background-color: #FFFFFF;
			box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-radius: 16upx;
			margin-bottom: 24upx;

			.classInfo {
				display: flex;
				flex-direction: column;

				.className {
					font-size: 30rpx;
					color: #202932;
				}

				.goodName {
					font-size: 30rpx;
					color: #202932;
				}
			}
			.iconfont{
				font-size: 40upx;
				color: #202932;
			}
		}
	}
</style>
